<template>
	<view>
		<view class="product layout">
			<view class="product-icon">
				<image :src="productData.productLogo"></image>
			</view>
			<view class="product-text">
				<view class="product-text-tooltip">{{productData.productName}}</view>
				<view class="product-text-timer">有效期：{{productData.expireDate}}</view>
				<view class="product-text-price">￥{{productData.marketPrice}}</view>
			</view>
		</view>
		<view class="subscribe">
			<view class="subscribe-header">预约信息</view>
			<view class="subscribe-form">
				<view class="subscribe-form-label">服务地址</view>
				<view class="subscribe-form-value"></view>
			</view>
			<view>
				<view class="subscribe-form-label">详细信息</view>
				<view class="subscribe-form-value"></view>
			</view>
		</view>
		<view class="timer-block">
			<view class="timer-block-header">上门时间</view>
			<view class="timer-block-daily layout">
				<view class="timer-block-daily-item" v-for="(item,index) in monthlyDays" :key="index" :class="orderForm.orderDate == item.volume?'timer-block-daily-actived':''" @click="orderForm.orderDate=item.volume">					
					<view class="timer-block-daily-item-tooltip">{{item.tooltip}}</view>
					<view class="timer-block-daily-item-volume">{{item.volume}}</view>
				</view>
				<view class="timer-block-daily-more">更多</view>
			</view>
			<view class="timer-block-hourly">
				<view class="timer-block-hourly-item">17:00-18:00</view>
				<view class="timer-block-hourly-item">18:00-19:00</view>
				<view class="timer-block-hourly-item">19:00-20:00</view>
				<view class="timer-block-hourly-item">20:00-21:00</view>
				<view class="timer-block-hourly-item">21:00-22:00</view>
			</view>
		</view>
		<view class="contract">
			<view class="contract-header">联系人信息</view>
			<view class="contract-form">
				<view class="contract-form-label">联系人</view>
				<view><input type="text" v-model="orderForm.fullName"/></view>
			</view>
			<view>
				<view class="contract-form-label">电话</view>
				<view><input type="tel" v-model="orderForm.fullName"/></view>
			</view>
			<view>
				<view class="contract-form-label">备注</view>
				<view><input type="text" v-model="orderForm.remark"/></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:"loaded",
				orderTotal:0,
				orderForm:{},
				productData:{
					productLogo:"/static/logo.png",					
					productName:"冰箱高温蒸汽清洗",
					expireDate:"2024-12-31 19:00:00",
					marketPrice:"120.00"
				},
				monthlyDays:[
					{
						tooltip:"周日",
						volume:"11-17"
					},
					{
						tooltip:"周一",
						volume:"11-18"
					},
					{
						tooltip:"周二",
						volume:"11-19"
					},
					{
						tooltip:"周三",
						volume:"11-20"
					},
					{
						tooltip:"周四",
						volume:"11-21"
					},
					{
						tooltip:"周五",
						volume:"11-22"
					},
					{
						tooltip:"周六",
						volume:"11-23"
					}
				]
			}
		},
		onLoad() {
			let curTime = new Date()
			let weekDay = curTime.getDay()
			weekDay = parseInt(weekDay)
			curTime = curTime.getTime()
			let maxDay = 0
			let curToday = ""
			let weekTooltip = ['日','一','二','三','四','五','六']
			this.monthlyDays = []
			while(maxDay < weekDay){
				let _curTime = curTime-60*60*24*Math.abs(maxDay-weekDay)*1000
				curToday = new Date(_curTime)
				this.monthlyDays.push({
					tooltip:"周"+weekTooltip[curToday.getDay()],
					volume:parseInt(curToday.getMonth())+1+"-"+curToday.getDate()
				})
				maxDay = maxDay+1
			}
			while(maxDay < 7){
				curToday = new Date(curTime)
				console.log(maxDay,weekDay,curTime)
				this.monthlyDays.push({
					tooltip:"周"+weekTooltip[curToday.getDay()],
					volume:parseInt(curToday.getMonth())+1+"-"+curToday.getDate()
				})
				curTime = curTime+60*60*24*1000
				maxDay = maxDay+1
			}
			
		},
		methods: {
			
		}
	}
</script>

<style>

page { width: 700rpx; margin: 0 auto; background: #ededed; }
.product { padding: 15rpx; background: #fff; margin-bottom: 25rpx; border-radius: 15rpx; margin-top: 25rpx; }
.product-icon { width: 200rpx; height: 200rpx; }
.product-text { padding-left: 15rpx; }
.product-text-tooltip { font-size: 16px; font-weight: bold; padding: 15rpx 0;}
.product-text-timer { font-size: 12px; color: #666; padding-bottom: 15rpx; }
.product-text-price { font-size: 14px; font-weight: 800; color: #f30;}

.timer-block { background: #fff; margin-bottom: 25rpx; padding: 15rpx; }
.timer-block-header { padding-bottom: 25rpx; }
.timer-block-daily { border-bottom: #ededed 1px solid; padding-bottom:15rpx; position: relative; }
.timer-block-daily-item { width: 150rpx; text-align: center; }
.timer-block-daily-item-tooltip { font-size: 14px; font-weight: bold;}
.timer-block-daily-item-volume {  }
.timer-block-daily-actived { background: #ededed; color: #fff;}
.timer-block-daily-more { position: absolute; right: 0; top: 0; bottom: 0; height: 45rpx; padding-top:15rpx; line-height: 100%; width: 30rpx; text-align: center; background: #ededed; font-size: 10px; }

.timer-block-hourly { display: flex; flex-wrap: wrap;  height: 100rpx; padding: 15rpx 0;}
.timer-block-hourly-item { width: 200rpx; height: 50rpx; line-height: 50rpx; margin-right: 20rpx; margin-bottom: 15rpx; text-align: center; background: #ededed; border-radius: 15rpx;}
.timer-block-hourly-actived { background: #f30; color: #000; font-weight: 900; }

.subscribe { padding: 15rpx; background: #fff; margin-bottom: 25rpx; border-radius: 15rpx; }
.subscribe-header { padding-bottom: 25rpx; }

.contract { padding: 15rpx; background: #fff; margin-bottom: 25rpx; border-radius: 15rpx; }
.contract-header { padding-bottom: 25rpx; }
</style>
